<template>
  <div class="a">
    <!-- 2.创建图表容器 ref类似于id-->
    <div ref="container" style=" height:250px"></div>
  </div>
</template>
<script>

// 1.引入图表构造函数
import { Pie } from "@antv/g2plot";
// 引入get方法 --》发送get请求
import {get} from '@/utils/request'
export default {
  data() {
    return {
      //存放设备状态数量
      empData:[]
    };
  },
  methods: {
    // 获取设备状态方法 发送请求
     async getEmpData(){
      //时间差
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      //console.log(res,'L1获取响应');
      // 将后端获取到的数据赋值给变量
      this.empData = res.data;
      // 获取到数据以后加载图表
      this.loadCharts();
    },
    // 加载饼图方法
    loadCharts() {
      // 3.创建图表实例
      // container==>document.getElementById('container')
      // ref 操作虚拟bom
      const pie = new Pie(this.$refs.container, {
        appendPadding: 10,
        data:this.empData,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        // 关闭图例
        //  legend:falsse,
        // 设置多色
        color:['#e3e8d7','#92967f'],
        label: {
          type: "outer",
          formatter(v){
            return v.value + '个';
          },
          style:{

            fill:'white',
            fontSize: 18,
          }
        },
        interactions: [{ type: "element-active" }],
      });
      //  4.渲染图表
      pie.render();
    },
  },
  // 生命周期 钩子函数 created --组件实例创建完成
  // 生命周期 组件实例挂载完成 --获取dom节点
  // vue 11个生命周期 created mounted
  mounted(){
    
    this.getEmpData();
    // this.loadCharts();
    
  }
};
</script>
<style>
  .a{
    color: #92967f;
  }
</style>